@extends('layouts.default')

@section('title', '教研活动')

@push('scripts')
<script src="{{ asset('lib/xm-select-v1.2.4/xm-select.js')}}"></script>
<script>
    layui.use(['layer','form','table','laytpl','laydate','element','laypage','upload'], function(){
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var element = layui.element;
        var laypage = layui.laypage;
        var upload = layui.upload;
        var cxmDemo;
        var pxmDemo;
        var xmCourseDemo;
        var PageId = "{{request()->get('id',0)}}";
        var clFiles = [];
        var perPage = 10;
        var totalNum = 0;
        var LiveParam = {};
        var DeleteFileIds = [];

        //自定义验证规则
        form.verify({
            otherReq: function(value,item){
                var $ = layui.$;
                var verifyName=$(item).attr('name')
                , verifyType=$(item).attr('type')
                ,formElem=$(item).parents('.layui-form')//获取当前所在的form元素，如果存在的话
                ,verifyElem=formElem.find('input[name='+verifyName+']')//获取需要校验的元素
                ,isTrue= verifyElem.is(':checked')//是否命中校验
                ,focusElem = verifyElem.next().find('i.layui-icon');//焦点元素
                if(!isTrue || !value){
                    //定位焦点
                    focusElem.css(verifyType=='radio'?{"color":"#FF5722"}:{"border-color":"#FF5722"});
                    //对非输入框设置焦点
                    focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {
                        focusElem.css(verifyType=='radio'?{"color":""}:{"border-color":""});
                    }).focus();
                    return '必填项不能为空';
                }
            }
        });

        renderSelect();

        laydate.render({
            elem: '#begin-date'
            ,type: 'date'
        });
        laydate.render({
            elem: '#end-date'
            ,type: 'date'
        });
        //日期时间范围
        laydate.render({
            elem: '#live-date'
            ,type: 'datetime'
            ,range: true
        });

        //下拉框初始化
        async function renderSelect(){
            // await renderDictionarySelect();
            await renderCoursesSelect();
            await renderDicSelect();
            await renderTermSelect();
            await renderCompere();
            await renderParticipants();
            pageInit();
        }

        //字典下拉框数据渲染
        function renderDictionarySelect() {
            return new Promise((resolve) => {
                getDictionaryItem({'diccode': ['SUBJECT']}, function (res){//, 'LEVEL'
                    if(res.code === 1) {
                        let data = res.data;

                        for(var k in data) {
                            let key = k.toLowerCase();
                            let d = data[k];

                            $('[data-role='+key+'List]').empty().append('<option value="">请选择</option>');
                            for (var i in d) {
                                $('[data-role='+key+'List]').append('<option value="' + d[i].optionId + '">' + d[i].selectValue + '</option>');
                            }
                        }

                        form.render();

                        resolve();
                    }
                });
            });
        }
        //学科下拉框数据渲染
        function renderCoursesSelect() {
            return new Promise((resolve) => {
                getDictionaryXmSelect({'diccode': ['SUBJECT']},function(res){
                    if(res.code == 1){
                        xmCourseDemo = xmSelect.render({
                            el: '#courses',
                            autoRow: true,
                            filterable: true,
                            tree: {
                                show: true,
                                showFolderIcon: true,
                                showLine: true,
                                indent: 20,
                                expandedKeys:false
                            },
                            direction: 'down',
                            height: '480px',
                            name:'course_item',
                            layVerify: 'required',
                            layVerType: 'msg',
                            layReqText:'学科不能为空',
                            theme: {
                                color: '#2d8cf0',
                            },
                            searchTips:'关键字搜索',
                            data: function(){
                                return res.data.SUBJECT
                            }
                        })

                        return resolve();
                    }
                });
            });
        }

        //字典下拉框数据渲染
        function renderDicSelect() {
            return new Promise((resolve) => {
                getDicListByCodes({'diccode': ['HDLB']}, function (res){
                    if(res.code === 1) {
                        let data = res.data;

                        for(var k in data) {
                            $('[data-role='+k+'List]').empty().append('<option value="">请选择</option>');
                            let d = data[k];
                            for (var i in d) {
                                $('[data-role='+k+'List]').append('<option value="' + d[i].itemcode + '">' + d[i].itemname + '</option>');
                            }
                        }

                        form.render();

                        resolve();
                    }
                });
            });
        }

        //学期下拉框数据渲染
        function renderTermSelect() {
            return new Promise((resolve) => {
                getTermData({},function(res){
                    if(res.code == 1){
                        $('[data-role=termList]').empty().append('<option value="">请选择</option>');
                        for(var i in res.data){
                            $('[data-role=termList]').append('<option value="'+res.data[i].id+'">'+res.data[i].title+'</option>');
                        }

                        form.render('select');

                        resolve();
                    }
                });
            });
        }

        //主讲教师下拉框数据渲染
        function renderCompere() {
            return new Promise((resolve) => {
                getParticipantsData({},function(res){
                    if(res.code == 1){
                        cxmDemo = xmSelect.render({
                            el: '#cter',
                            autoRow: true,
                            filterable: true,
                            tree: {
                                show: true,
                                showFolderIcon: true,
                                showLine: true,
                                indent: 20,
                                expandedKeys:false
                            },
                            direction: 'down',
                            filterable: true,
                            height: 'auto',
                            name:'compere',
                            layVerify: 'required',
                            layVerType: 'msg',
                            layReqText:'主讲教师不能为空',
                            theme: {
                                color: '#2d8cf0',
                            },
                            searchTips:'关键字搜索',
                            data: function(){
                                return res.data
                            }
                        })

                        return resolve();
                    }
                });
            });
        }
        //参与教师下拉框数据渲染
        function renderParticipants() {
            return new Promise((resolve) => {
                getParticipantsData({},function(res){
                    if(res.code == 1){
                        pxmDemo = xmSelect.render({
                            el: '#pter',
                            autoRow: true,
                            filterable: true,
                            tree: {
                                show: true,
                                showFolderIcon: true,
                                showLine: true,
                                indent: 20,
                                expandedKeys:false
                            },
                            direction: 'down',
                            filterable: true,
                            height: 'auto',
                            name:'participant',
                            layVerify: 'required',
                            layVerType: 'msg',
                            layReqText:'参与教师不能为空',
                            theme: {
                                color: '#2d8cf0',
                            },
                            searchTips:'关键字搜索',
                            data: function(){
                                return res.data
                            }
                        })

                        return resolve();
                    }
                });
            });
        }

        //数据渲染
        function pageInit(){
            getTeaActivityOne({id:PageId}, function(res) {
                if(res.code === 1) {
                    let Activity = res.data;
                    let TeachingActivity = Activity.teaching_activity;
                    let oldLevel = Activity.level && Activity.level_array.length > 0 ? Activity.level_array[0].selectValue : '校级';

                    form.val('editForm', {
                        'id': PageId,
                        'data_version_id': Activity.data_version_id,
                        'name': Activity.name,
                        'begin_date': Activity.begin_date,
                        'end_date': Activity.end_date,
                        'activity_level': TeachingActivity.activity_level ? TeachingActivity.activity_level : oldLevel,
                        // 'course': Activity.course_set[0].optionId,
                        'teaching_type': TeachingActivity.teaching_type,
                        'is_sign': TeachingActivity.is_sign,
                        'activity_type': TeachingActivity.activity_type,
                        'is_open': TeachingActivity.is_open,
                        'place': TeachingActivity.place,
                        'content': TeachingActivity.content,
                        'video_link': TeachingActivity.video_link
                    });

                    if(Activity.course && Activity.course_set.length > 0) {
                        let courseSelected = [];
                        layui.each(Activity.course_set, function(i, d) {
                            courseSelected.push(d.optionId);
                        });
                        xmCourseDemo.setValue(courseSelected);
                    }

                    //参与教师
                    cxmDemo.setValue(Activity.participants_users.pere);
                    pxmDemo.setValue(Activity.participants_users.pant);
                    // //直播
                    if(TeachingActivity.live_id) {

                        let lHtml = '<div class="file-item"><span class="file-name">'+TeachingActivity.live.name+'</span><span class="layui-icon layui-icon-close-fill" onClick="liveDelete()"></span></div>';
                        $('#live-show').html(lHtml);
                        $("input[name=live_id]").val(TeachingActivity.live.id);
                    }
                    //文件
                    if(Activity.proof_material_array.length){
                        layui.each(Activity.proof_material_array, function(i, d) {
                            if(d.field == 'cl') {
                                clFiles.push(d.file_origin);
                                $('#cl-file').val(JSON.stringify(clFiles));

                                $('#cl-uploader').parent().find('.file-show').html('');
                                for(i in clFiles) {
                                    if(clFiles[i]) {
                                        let fsHtml = '<div class="file-item"><span class="file-name">'+clFiles[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 1)"></span></div>';
                                        $('#cl-uploader').parent().find('.file-show').append(fsHtml);
                                    }
                                }
                            }
                        });
                    }

                    form.render();
                } else {
                    layer.msg('无数据记录', {time: 2000, icon: 5});
                }
            });
        }

        window.fileDelete = function (fk, ft) {
            if(ft == 1) {
                layer.confirm('作业的参考材料中使用此文件的会同步删除！', {
                    btn: ['确认同步删除','取消'] //按钮
                }, function(){
                    if(clFiles[fk].id) {
                        DeleteFileIds.push(clFiles[fk].id);
                    }
                    delete clFiles[fk];
                    let files = clFiles;

                    $('#cl-file').val(JSON.stringify(clFiles));
                    $('#cl-uploader').parent().find('.file-show').html('');
                    for(i in files) {
                        if(files[i]) {
                            let fsHtml = '<div class="file-item"><span class="file-name">'+files[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 1)"></span></div>';
                            $('#cl-uploader').parent().find('.file-show').append(fsHtml);
                        }
                    }

                    layer.closeAll();
                }, function(){
                    layer.closeAll();
                    return false;
                });

            }
        }

        //文件上传
        upload.render({
            elem: '#cl-uploader'
            ,url: "{{route('uploads.upload')}}" //此处配置你自己的上传接口即可
            ,accept: 'file' //普通文件
            ,multiple: true
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                if(obj.total == obj.successful) {

                } else {
                    layer.msg(obj.failed + '个文件上传失败！');
                }
            }
            ,done: function(res){
                if(res.code != 1) {
                    layer.msg(res.msg);
                    return false;
                }
                clFiles.push(res.data);
                $('#cl-file').val(JSON.stringify(clFiles));

                $('#cl-uploader').parent().find('.file-show').html('');
                for(i in clFiles) {
                    if(clFiles[i]) {
                        let fsHtml = '<div class="file-item"><span class="file-name">'+clFiles[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 1)"></span></div>';
                        $('#cl-uploader').parent().find('.file-show').append(fsHtml);
                    }
                }
                layer.msg('上传成功', {time: 1000});
            }
            ,error: function(index, upload){ //错误回调
                console.log(index);
            }
        });

        // 选择直播
        $("#live-selecter").on('click', function() {
            layer.ready(function() {
                var index = layer.load(2);
                var liveLayer = layer.open({
                    type: 1,
                    title: '直播视频资源',
                    content: $('#liveTerm'),
                    area: ['88%', '80%'],
                    success: function(layero, index){
                        toGetLiveList(1);
                    },
                    cancel: function() {
                        //右上角关闭回调
                        $('#liveForm')[0].reset();
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                });
                layer.full(liveLayer);
                layer.close(index);
            });
            return false;
        });
        // 直播预约
        $("#reserve-btn").click(function(data) {
            layer.ready(function() {
                var index = layer.open({
                    title: '直播预约',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['70%', '60%'],
                    content: "{{route('live.addView', ['isPop' => true])}}",
                });
            });
        });
        // 直播列表查询
        form.on('submit(queryLiveBtn)', function(data) {
            Object.assign(LiveParam, {"search": data.field});
            toGetLiveList(1);
        });
        // 直播列表重置
        form.on('submit(resetLiveBtn)', function(data) {
            LiveParam = {};
            $('#liveForm')[0].reset();
            toGetLiveList(1);
        });
        //直播列表数据
        function toGetLiveList(page) {
            Object.assign(LiveParam, {"page": page});
            getLiveList(LiveParam, function(res){
                if(res.code == 1){
                    table.render({
                        data: res.data,
                        elem: '#liveTable',
                        cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        limit: res.limit,
                        skin: 'nob',
                        cols: [[
                            {type: "radio"},
                            {field: 'term_name', title: '学年学期', align: 'left', templet: function(d) {
                                let termName = d.data_version_id ? d.term.title : '-';
                                return d.data_version_name ? d.data_version_name : termName;
                            }},
                            {field: 'name', title: '标题', align: 'center'},
                            {field: 'live_time', title: '直播时间', align: 'center'},
                            {field: 'subject', title: '学科', align: 'center'},
                            {field: 'grade', title: '年级', align: 'center'},
                            {field: 'host_name', title: '主讲人', align: 'center', templet: function(d) {
                                if(d.host_set) {
                                    let h = '';
                                    let u = d.host_set.host_users;
                                    let l = u.length - 1;
                                    layui.each(u, function(i, item) {
                                        if(i >= l) {
                                            h += item.nickname;
                                        } else {
                                            h += item.nickname + ', ';
                                        }
                                    });
                                    return h;
                                } else {
                                    return '-';
                                }
                            }},
                            {field: 'xx', title: '状态', align: 'center'}
                        ]],
                        done: function(re, page, count){
                            //默认选中
                            let liveId = $("input[name=live_id]").val();
                            layui.each(re.data, function(i, l) {
                                if(liveId == l.id) {
                                    $(".layui-table-view[lay-id='liveTable'] .layui-table-body tr[data-index="+l.LAY_TABLE_INDEX+"] .layui-form-radio").click();
                                }
                            });
                        }
                    });

                    $('#livePageBar').empty();
                    if(res.total > 0){
                        //分页
                        laypage.render({
                            elem: 'livePageBar' //注意，这里的 test1 是 ID，不用加 # 号
                            ,count: [res.total] //数据总数，从服务端得到
                            ,curr: page
                            ,layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
                            ,limit: res.limit
                            ,jump: function(obj, first) {
                                //首次不执行
                                if (!first) {
                                    Object.assign(LiveParam, {"limit": obj.limit});
                                    toGetLiveList(obj.curr)
                                }
                            }
                        });
                    }
                }else {
                    layer.msg(res.msg, {icon: 5});
                }
            });
        }
        $('#live-submit').on('click', function() {
            let checkStatus = table.checkStatus('liveTable');
            let LiveSelected = checkStatus.data;
            let liveId = $("input[name=live_id]").val();

            if(LiveSelected.length <= 0 && !liveId) {
                layer.msg('请选择直播视频！', {icom: 5, time: 2000});
                return false;
            }

            if(liveId) {
                if(LiveSelected.length <= 0) {
                    layer.closeAll();
                    return false;
                }

                var confirmLayer = layer.confirm('作业的参考材料中使用此直播资源的会同步删除！', {
                    btn: ['确认同步删除','取消'] //按钮
                }, function(){
                    layui.each(LiveSelected, function(i, item) {
                        let lHtml = '<div class="file-item"><span class="file-name">'+item.name+'</span><span class="layui-icon layui-icon-close-fill" onClick="liveDelete()"></span></div>';
                        $('#live-show').html(lHtml);
                        $("input[name=live_id]").val(item.id);
                    });

                    layer.closeAll();
                }, function(){
                    layer.closeAll();
                });
            } else {
                layui.each(LiveSelected, function(i, item) {
                    let lHtml = '<div class="file-item"><span class="file-name">'+item.name+'</span><span class="layui-icon layui-icon-close-fill" onClick="liveDelete()"></span></div>';
                    $('#live-show').html(lHtml);
                    $("input[name=live_id]").val(item.id);
                });

                layer.closeAll();
            }
        });
        window.liveDelete = function () {
            layer.confirm('作业的参考材料中使用此直播资源的会同步删除！', {
                btn: ['确认同步删除','取消'] //按钮
            }, function(){
                layer.closeAll();
                $('#live-show').html("");
                $("input[name=live_id]").val("");
            }, function(){
                layer.closeAll();
                return false;
            });
        }

        //提交
        form.on('submit(sub)', function(data){
            let d = data.field;
            d.comperes = cxmDemo.getValue('nameStr');
            d.compere_ids = cxmDemo.getValue('value');
            d.participants = pxmDemo.getValue('nameStr');
            d.participant_ids = pxmDemo.getValue('value');
            d.course_dic_ids = xmCourseDemo.getValue('value');
            d.delete_file_ids = JSON.stringify(DeleteFileIds);

            editTeaActivity(d, function(res){
                if(res.code == '1'){
                    layer.msg(res.msg,{icon: 6,time: 1000},function(){
                        window.history.back();
                    });
                }else{
                    layer.msg(res.msg, {icon: 5,shift : 6});
                }
            });

            return false;
        });

        $(".cancel-btn").click(function(){
            layer.closeAll();
        });
    });
</script>
@endpush

@section('content')
<style>
    .opt-panel{padding: 10px;}
    .panel-title h3{margin-bottom: 20px;font-weight: 800;}

    .opt-form{padding: 20px 5px 0;}
    .opt-area{display: flex;flex-direction: row-reverse;padding: 10px 20px;margin-bottom: 20px;}
    .opt-area button, .back-btn{margin-left: 10px;}
    .opt-form .layui-row{margin-bottom: 10px;}

    .resourse-row{min-height: 200px;}
    #homework-row{padding: 0 5px;}
    .opt-add-area{display: grid;grid-template-columns: 70% 30%;}
    .opt-add-area #add-homework{margin-right: 20px;float: right;}

    .live-btn-container{margin-left: 80%;}
    .cancel-btn{margin-left: 10px;}

    .special-cloumn{grid-template-columns: 25% 25% 50%;}
    .layuik-input-special-inline{width: 60%;margin-left: 5px;}
</style>

<div class="layui-row">
    <div class="layui-panel opt-panel">
        <form class="layui-form opt-form" action="" id="edit-form" lay-filter="editForm">
            <div class="layui-row">
                <div class="panel-title">
                    <h3>教研活动 - 编辑</h3>
                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>学年学期：</label>
                        <div class="layuik-input-inline">
                            <select class="data-version-id" name="data_version_id" lay-filter="termList" data-role="termList" lay-verify="required" lay-reqText="不能为空"></select>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>教研名称：</label>
                        <div class="layuik-input-inline">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入" lay-reqText="不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item special-cloumn">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>教研形式：</label>
                        <div class="layuik-input-special-inline">
                            <input type="radio" name="teaching_type" title="在线" value="1" class="layui-radio">
                            <input type="radio" name="teaching_type" title="离线" value="2" class="layui-radio">
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>是否签到：</label>
                        <div class="layuik-input-special-inline">
                            <input type="radio" name="is_sign" title="是" value="1" class="layui-radio">
                            <input type="radio" name="is_sign" title="否" value="2" class="layui-radio">
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>活动类别：</label>
                        <div class="layuik-input-inline">
                            <select name="activity_type" lay-filter="hdlbList" data-role="hdlbList" lay-verify="required" lay-reqText="不能为空"></select>
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>学科：</label>
                        <div class="layuik-input-inline">
                            <div type="text" id="courses" class="xm-select-courses"></div>
                            <!-- <select name="course" lay-filter="subjectList" data-role="subjectList" lay-verify="required" lay-reqText="不能为空"></select> -->
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>级别：</label>
                        <div class="layuik-input-inline">
                            <input type="text" name="activity_level" required lay-verify="required" placeholder="请输入" lay-reqText="不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>公开课：</label>
                        <div class="layuik-input-inline">
                            <input type="radio" name="is_open" title="是" value="1" lay-verify="otherReq" class="layui-radio">
                            <input type="radio" name="is_open" title="否" value="2" lay-verify="otherReq" class="layui-radio">
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label">地址：</label>
                        <div class="layuik-input-inline">
                            <input type="text" name="place" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>开始日期：</label>
                        <div class="layuik-input-inline">
                            <input type="text" name="begin_date" id="begin-date" required lay-verify="required" placeholder="请选择" lay-reqText="不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>结束日期：</label>
                        <div class="layuik-input-inline">
                            <input type="text" name="end_date" id="end-date" required lay-verify="required" placeholder="请选择" lay-reqText="不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">教研内容：</label>
                        <div class="layuik-input-inline">
                            <textarea name="content" id="" rows="3" class="layui-textarea" placeholder="请输入"></textarea>
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>主讲教师：</label>
                        <div class="layuik-input-inline">
                            <div type="text" id="cter" class="xm-select-demo"></div>
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>参与教师：</label>
                        <div class="layuik-input-inline">
                            <div type="text" id="pter" class="xm-select-demo"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row resourse-row">
                <div class="panel-title">
                    <h3>教研活动 - 教研资源</h3>
                </div>
                <!-- <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">直播资源：</label>
                        <div class="layuik-input-inline layuik-upload">
                            <button type="button" class="layui-btn layui-btn-normal layui-btn-disabled" disabled id="live-selecter"><i class="layui-icon"></i> 选择直播</button>
                            <div class="file-show" id="live-show"></div>
                            <input type="hidden" name="live_id" value="">
                        </div>
                    </div>
                </div> -->
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">材料：</label>
                        <div class="layuik-input-inline layuik-upload">
                            <button type="button" class="layui-btn layui-btn-normal" id="cl-uploader"><i class="layui-icon"></i>上传文件</button>
                            <div class="file-show"></div>
                            <input style="display:none" type="text" id="cl-file" name="files[cl]" value="">
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">视频链接：</label>
                        <div class="layuik-input-inline">
                            <input type="text" name="video_link" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-row">
                <div class="opt-area">
                    <a href="javascript:history.go(-1);" class="layui-btn layui-btn-primary back-btn">返回</a>
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="sub">提交</button>
                    <input type="hidden" name="activity_category" value="TEACHERTRAINING_ACTIVITY_TABLE">
                    <input type="hidden" name="id" value="">
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 选择直播视频资源 -->
<div id="liveTerm" style="display: none;">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row">
                <form id="liveForm" class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">学年学期：</label>
                            <div class="layui-input-inline">
                                <select name="data_version_id" lay-filter="termList" data-role="termList"></select>
                            </div>
                        </div>
                        <div class="layui-inline" >
                            <label class="layui-form-label">标题：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" class="layui-input" placeholder="请输入" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-inline" >
                            <label class="layui-form-label">直播时间：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="live_time" id="live-date" placeholder="请选择" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">学科：</label>
                            <div class="layui-input-inline">
                                <select name="subject_dic_id" lay-filter="subjectList" data-role="subjectList"></select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" lay-submit lay-filter="queryLiveBtn" id="live-search-btn" class="layui-btn layui-btn-normal">查询</button>
                            <button type="button" lay-submit lay-filter="resetLiveBtn" class="layui-btn layui-btn-primary">重置</button>
                            <button type="button" class="layui-btn" id="reserve-btn">直播预约</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 内容主体区域 -->
    <div class="layui-card">
        <div class="layui-card-body">
            <table class="layui-hide" id="liveTable" lay-filter="liveTable" lay-data="{id: 'liveTable'}"></table>
            <div class="pagebarbox" style="text-align: end"><div id="livePageBar" class="pagebar"></div></div>
        </div>

        <div class="layui-btn-container live-btn-container">
            <button type="button" id="live-submit" class="layui-btn layui-btn-normal">提交</button>
            <button type="button"class="layui-btn layui-btn-primary cancel-btn">取消</button>
        </div>
    </div>
</div>
@endsection
